<template>
	<div class="loader" :class="{'waiting':isShow}"  v-if="isShow"></div>
</template>

<script>
import BaseWidget from '@/jimu/BaseWidget.js'
export default {
	name: 'LoadingWidget',
	mixins:[ BaseWidget ],
	data(){
		return {
			isShow: false
		}
	},
	created(){
		this.subscribe()
	},
	methods:{
		subscribe: function(){
			this.bus.$on("showLoading", (isShow) => {
				this.isShow = isShow
			})
		}
	}
}
</script>

<style lang="scss">
	@import 'common';

	.loader {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 3px;
        overflow: hidden;
        display: none;
        z-index: 20;

        &.small {
            height: 2px;
        }

        &.waiting, &.error {
            display: block;
            &::after {
                content: '';
                display: block;
            }
        }

        &.waiting::after {
            height: 100%;
			width: 50%;
			transform: translateX(-200%);
            background-image: linear-gradient(90deg, #1181fb 0%, #32BBFE 100%);
            @include animation( g-loader-bar-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite );
        }

        &.error::after {
            height: 100%;
            width: 100%;
            background-color: $danger;
        }

        @include keyframes( g-loader-bar-progress ) {
            from {
                transform: translateX(-200%)
            }
            to {
                transform: translateX(200%)
            }
        }
    }
</style>